<template>
    <div class="container">
      <el-card class="box-card">
        <div class="header">
          <h2>支行管理</h2>
          <el-button type="primary" @click="openDialog()">添加支行</el-button>
        </div>
        <el-table :data="branches" style="width: 100%">
          <el-table-column prop="branch_name" label="支行名称" />
          <el-table-column prop="address" label="地址" />
          <el-table-column prop="phone" label="电话" />
          <el-table-column label="操作" width="180">
            <template #default="scope">
              <el-button size="small" @click="openDialog(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="deleteBranch(scope.row.branch_id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
  
      <!-- 添加/编辑弹窗 -->
      <el-dialog v-model="dialogVisible" :title="form.branch_id ? '编辑支行' : '添加支行'">
        <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
          <el-form-item label="名称" prop="branch_name">
            <el-input v-model="form.branch_name" />
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="form.address" />
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input v-model="form.phone" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">保存</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import axios from 'axios'
  import { ElMessage, ElMessageBox } from 'element-plus'
  
  const branches = ref([])
  const dialogVisible = ref(false)
  const form = ref({})
  const formRef = ref(null)
  
  // 校验规则
  const rules = {
    branch_name: [{ required: true, message: '请输入支行名称', trigger: 'blur' }],
    address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
    phone: [
      { required: true, message: '请输入电话', trigger: 'blur' },
      {
        pattern: /^(\d{3,4}-)?\d{7,8}$/, // 座机格式如 021-12345678
        message: '请输入正确的座机号码，如：021-12345678',
        trigger: 'blur'
      }
    ]
  }
  
  // 获取全部支行
  const fetchBranches = async () => {
    const res = await axios.get('/api/branches/getAll')
    branches.value = res.data.data
  }
  
  // 打开弹窗
  const openDialog = (branch = {}) => {
    form.value = { ...branch }
    dialogVisible.value = true
  }
  
  // 提交表单
  const submitForm = () => {
    formRef.value.validate(async (valid) => {
      if (!valid) return
      try {
        if (form.value.branch_id) {
          await axios.put('/api/branches', form.value)
          ElMessage.success('更新成功')
        } else {
          await axios.post('/api/branches', form.value)
          ElMessage.success('添加成功')
        }
        dialogVisible.value = false
        fetchBranches()
      } catch (err) {
        ElMessage.error(err.response?.data?.msg || '操作失败')
      }
    })
  }
  
  // 删除支行
  const deleteBranch = async (branch_id) => {
    ElMessageBox.confirm('确定删除该支行？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(async () => {
      await axios.delete('/api/branches', { data: { branch_id } })
      ElMessage.success('删除成功')
      fetchBranches()
    }).catch(() => {})
  }
  
  onMounted(() => {
    fetchBranches()
  })
  </script>
  
  <style scoped>
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}


/* 全屏容器，带渐变背景 */
.container {
  width: 100vw;               /* 100% 视口宽度 */
  height: 100vh;              /* 100% 视口高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px;
  box-sizing: border-box;

  background: linear-gradient(135deg, #fbc2eb, #a6c1ee, #d4fc79, #96e6a1);
  background-size: 400% 400%;
  animation: gradientMove 15s ease infinite;
}
/* 卡片样式：半透明、磨砂 */
.box-card {
  width: 1100px;
  max-width: 100%;
  padding: 30px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);  /* 半透明白色 */
  backdrop-filter: blur(10px);          /* 磨砂玻璃效果 */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

/* 表格每一行背景设置透明 */
.el-table-column {
  background-color: rgba(255, 255, 255, 0.5);
}

/* 美化按钮（默认样式 + 渐变） */
.el-button--primary {
  background: linear-gradient(to right, #23a6d5, #23d5ab);
  border: none;
  color: white;
}
.el-button--primary:hover {
  background: linear-gradient(to right, #1e90ff, #20c997);
}

/* 动态背景动画 */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
  </style>
  